<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
	xmlns:f="http://java.sun.com/jsf/core"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:c="http://java.sun.com/jsp/jstl/core"
	xmlns:ui="http://java.sun.com/jsf/facelets"
	xmlns:a4j="http://richfaces.org/a4j"
	xmlns:rich="http://richfaces.org/rich"
	xmlns:t="http://myfaces.apache.org/tomahawk">
<h:head>
	<title></title>
	<h:outputStylesheet library="css" name="style.css" />
</h:head>
<h:body>
	<ui:include src="header.xhtml" />
	<c:if test="${userlogin !=null}">

		<div style="height: 800px;" align="center">
			<br />
			<h:form id="friendSearchForm">
				<h:outputLabel value="Filter" for="filter" />
				<h:selectOneMenu id="filter" value="#{searchBean.filter}"
					required="true">
					<f:selectItem itemValue="name" itemLabel="Name" />
					<f:selectItem itemValue="sex" itemLabel="Sex" />
					<f:selectItem itemValue="city" itemLabel="City" />
				</h:selectOneMenu>

				<h:outputLabel value="Search" for="search" />
				<h:inputText id="search" value="#{searchBean.condition}"
					required="false" />
				<h:commandButton value="Find" id="findFriends"
					action="#{searchBean.search}" />
			</h:form>
			<div align="center" class='searchingBackground'>
				<h:form>
					<h:dataTable value="#{searchBean.users}" var="user"
						rowClasses="oddRow, evenRow"
						rendered="#{not empty searchBean.users}" styleClass="userTable"
						headerClass="headerTable" columnClasses="normal,centered">
						<rich:column>
							<f:facet name="header">
								<h:column>
									<h:outputText value="Photo" />
								</h:column>
							</f:facet>
							<div style="height: 50px; float: left;">
								<h:form>
									<h:graphicImage id="image" alt="Avatar"
										url="#{user.avatarPath}" style="height: 50px">
									</h:graphicImage>
								</h:form>

							</div>
						</rich:column>
						<h:column>
							<f:facet name="header">
								<h:column>
									<h:outputText value="Name" />
								</h:column>
							</f:facet>
							<h:link value="#{user.user.name}" outcome="user">
								<f:param name="user" value="#{user.user.login}" />
							</h:link>
						</h:column>
						<h:column>
							<f:facet name="header">
								<h:column>
									<h:outputText value="Sex" />
								</h:column>
							</f:facet>
							<h:outputText value="#{user.user.sex}" />
						</h:column>
						<h:column>
							<f:facet name="header">
								<h:column>
									<h:outputText value="City" />
								</h:column>
							</f:facet>
							<h:outputText value=" #{user.user.city}" />
						</h:column>
						<h:column>
							<f:facet name="header">
								<h:column>
									<h:outputText value="Action" />
								</h:column>
							</f:facet>
							<h:panelGrid columns="1">
								<h:commandLink value="Follow" action="#{searchBean.follow}">
									<f:setPropertyActionListener
										target="#{searchBean.selectedUser}" value="#{user.user}" />
								</h:commandLink>
							</h:panelGrid>
						</h:column>

					</h:dataTable>
				</h:form>
			</div>

		</div>
		<ui:include src="footer.xhtml" />

	</c:if>

</h:body>
</html>
